<template>
  <!--选题白名单-->
  <div class="edu-page-warp">
    <!--新增 编辑弹框-->
    <WhitelistDialog ref="whitelistDialog" :dialogForm="dialogForm" :actionType="actionType" :studentTableData="studentTableData" :whitelistDialogVisible="dialogVisible" v-if="dialogVisible" @whitelist-submit="whitelistSubmit" @whitelist-cancel="whitelistCancel"></WhitelistDialog>

    <el-card shadow="never">
      <div class="edu-page-title">{{$t('graduationDesign.studentWhitelist')}}</div>
      <div class="edu-opertion-bar">
        <div class="float-right">
          <el-button @click="onExport" v-loading.fullscreen.lock="loading" element-loading-text="Loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, .48)">{{$t('graduationDesign.export')}}</el-button>
          <el-button type="primary" @click="onAdd">{{$t('graduationDesign.add')}}</el-button>
        </div>
      </div>
      <el-table ref="topicWhitelistTable" :data="topicWhitelistTable" @expand-change="handleExpandChange" row-key="studentId" :expand-row-keys="expandRowKeys" @selection-change="handleSelectChange" size="mini" stripe tooltip-effect="light">
        <el-table-column type="selection" width="30"></el-table-column>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="scope.row.subjectExpandList">
              <el-table-column :label="$t('graduationDesign.subjectCollege')" prop="optCollegeIdI18n"></el-table-column>
              <el-table-column :label="$t('graduationDesign.subjectMajor')" prop="optSubjectIdI18n"></el-table-column>
              <el-table-column :label="$t('graduationDesign.subjectDerection')" prop="optDirectIdI18n"></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column :label="$t('graduationDesign.studentId')" prop="studentId" min-width="90" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('graduationDesign.name')" prop="studentName" min-width="90" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('graduationDesign.college')" prop="collegeIdI18n" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('graduationDesign.major')" prop="subjectIdI18n" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('graduationDesign.direction')" prop="directIdI18n" min-width="90" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('graduationDesign.subjectCollege')" prop="optCollegeIdI18n" min-width="120" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('graduationDesign.subjectDerection')" prop="optDirectIdI18n" min-width="120" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('graduationDesign.operation')" min-width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="onEdit(scope.row)">{{$t('graduationDesign.edit')}}</el-button>
            <el-button type="text" @click="onDelete(scope.row)">{{$t('graduationDesign.delete')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="edu-opertion-bar">
        <div class="float-right">
          <el-pagination :current-page.sync="queryForm.pageNum_" :page-sizes="[20, 50, 100, 500, 1000]" :page-size="queryForm.pageSize_" :total="queryForm.total_" layout="total, sizes, prev, pager, next, jumper" style="float: right;margin:10px 60px 0 0;" @size-change="handlePageSizeChange" @current-change="handleCurrentPageChange" />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/topicWhitelist";
import tools from 'common/src/views/underGraduationDesign/tools.js';
export default {
  name: 'topicWhitelist',
  data() {
    return {
      api: API,
      getList: '/api/designservice/optWhiteList/queryByPage',
      queryForm: {
        pageNum_: 1,
        total_: 0,
        pageSize_: 20,
        condition: {}
      },
      loading: false,
      dialogVisible: false,
      topicWhitelistTable: [], // 白名单列表
      whitelistSeletedData: [], //勾选的数据
      dialogForm: {},
      expandRowKeys: [], // 列表展开行
      studentTableData: [],
      actionType: ''
    };
  },
  mounted() {
    this.searchList();
  },
  methods: {
    searchList() {
      this.api.getList(this.queryForm).then(({ data }) => {
        this.topicWhitelistTable = data.list;
        this.queryForm.total_ = data.total;
        this.queryForm.pageNum_ = data.pageNum;
        this.queryForm.pageSize_ = data.pageSize;
      });
    },
    reset() {
      this.queryForm = {
        pageNum_: 1,
        total_: 0,
        pageSize_: 20,
        condition: {}
      };
      this.searchList();
    },
    // 页面size
    handlePageSizeChange(val) {
      this.queryForm.pageSize_ = val;
      this.searchList();
    },
    // 分页
    handleCurrentPageChange(val) {
      this.queryForm.pageNum_ = val;
      this.searchList();
    },
    handleSelectChange(val) {
      this.whitelistSeletedData = val;
    },
    // 扩展列，查看白名单详情
    handleExpandChange(row, expandedRows) {
      if (expandedRows.length) {
        this.expandRowKeys = [];
        this.api.getExpandDetail(row).then(res => {
          row.subjectExpandList = res.data;
          this.topicWhitelistTable.forEach((item, index) => {
            if (item.studentId === row.studentId) {
              this.topicWhitelistTable.splice(index, 1, row);
              // 保持扩展列展开
              if (row) {
                this.expandRowKeys.push(row.studentId);
              }
            }
          });
        }).catch();
      }
    },
    onAdd() {
      this.actionType = "ADD";
      this.dialogForm = {
        gradeId: '',
        studentId: '',
        studentName: '',
        collegeIdI18n: '',
        subjectIdI18n: '',
        directIdI18n: ''
      };
      this.studentTableData = [{
        optCollegeId: '',
        optSubjectId: '',
        optDirectId: '',
        subjectOptions: [],
        directionOptions: []
      }];
      this.dialogVisible = true;
    },
    onEdit(row) {
      this.api.getExpandDetail(row).then(res => {
        this.dialogVisible = true;
        this.dialogForm = { ...row };
        this.actionType = "EDIT";
        this.studentTableData = res.data;
        this.studentTableData.forEach(item => {
          item.subjectOptions = [];
          item.directionOptions = [];
        });
      }).catch();
    },
    onDelete(row) {
      this.$delConfirm(this.$t('graduationDesign.deleteConfirm'), this.$t('graduationDesign.delete')).then(() => {
        const params = { ...row };
        this.api.delete(params).then(res => {
          this.$message.success(this.$t('graduationDesign.deleteSuccess'));
          this.searchList();
        }).catch();
      });
    },
    // 新增 编辑提交
    whitelistSubmit(data, actionType) {
      let req = null;
      if (actionType === "ADD") {
        req = this.api.insert(data);
      } else {
        req = this.api.update(data);
      }
      req.then(res => {
        this.$message.success("操作成功");
        this.dialogVisible = false;
        this.expandRowKeys = [];
        this.searchList();
      }).catch();
    },
    // 取消
    whitelistCancel(data) {
      this.dialogVisible = false;
    },
    // 导出
    onExport() {
      const params = Object.assign(this.queryForm, { exportList: this.whitelistSeletedData });
      this.api.export(params).then(res => {
        if (res.code == 200) {
          // this.delayRequest(res.data.key);
          tools.downloadFile(res.data.key, "学生选题白名单.xls", null, this);
        }
      });
    },
    // 查文件导出状态，等待导出
    async delayRequest(key) {
      this.loading = true;
      await new Promise(resolve => setTimeout(resolve, 3000));
      this.api.getExportStatus(key).then(res => {
        this.loading = false;
        if (res.code === 200 && res.data.status) {
          let path = 'api/designservice/common/export?path=' + res.data.path;
          window.open(path);
        } else {
          this.delayRequest(key);
        }
      }).catch(err => {
        this.loading = false;
        this.delayRequest(key);
      });
    }
  },
  components: {
    WhitelistDialog: () => import('./components/whitelistDialog')
  }
}
</script>
<style lang="scss" scoped>
</style>
